<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>权限分配</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="list_block" v-loading="loading">
                <div class="list_title">
                    <div>
                        当前角色：<span>{{this.roleName}}</span>
                    </div>
                </div>
                <div class="tb" v-for="(item,index) in powerList" :key="index">
                    <div class="tb_title">
                        <el-checkbox v-model="item.chooseFlag" :disabled="item.disable" @change="change1(item,$event)"></el-checkbox>
                        <span>{{item.title}}</span>
                    </div>
                    <div class="tb_ul clearfix">
                        <div class="tb_ul_l"></div>
                        <div class="tb_ul_r">
                            <template v-if="item.childs" v-for="(item2,index2) in item.childs" class="tb_ul_r">
                                <div class="typeName">
                                    <div class="tn">
                                        <span><el-checkbox v-model="item2.chooseFlag" :disabled="item2.disable" @change="change2(item,item2,$event)"></el-checkbox></span>
                                        <span>{{item2.typeName||'默认'}}</span>
                                    </div>
                                    <div class="cheAll">
                                        <el-checkbox v-model="item2.cheAll" @change="checkAll(item,item2,$event)">全选</el-checkbox>
                                    </div>
                                </div>
                                <ul class="listul clearfix">
                                    <li  v-for="(item3,index3) in item2.childs">
                                        <el-checkbox v-model="item3.chooseFlag" class="l" :disabled="item3.disable" @change="change3(item,item2,$event)"></el-checkbox>
                                        <span class="span_title">{{item3.title}}</span>
                                    </li>
                                </ul>
                            </template>
                        </div>
                    </div>
                    <div class="shield clearfix">
                        <p class="s_title l">屏蔽选项</p>
                        <el-radio-group v-model="item.filterType" @change="changeRadio($event,item)" class="group_style">
                        <div class="l">
                            <p class="s_radio">
                                <el-radio label="-1">数据链接默认选项</el-radio>
                            </p>
                            <p class="s_radio">
                                <el-radio label="0">不屏蔽</el-radio>
                            </p>
                        </div>
                        <div class="l">
                            <p class="s_radio2">
                                <el-radio label="2">字段屏蔽数据，帐号关联数据监控字段：</el-radio>
                                <span style="display:inline-block;width:130px">
                                    <el-select placeholder="请选择" v-model="item.filterAccountFieldType" clearable>
                                        <el-option v-for="item in filterTypes" :label="item.label" :value="item.value" :key="item.value"></el-option>
                                    </el-select>
                                </span>
                                <span class="s_input" style="display:inline-block;width:130px">
                                    <el-input v-model="item.filterAccountFieldName"></el-input>
                                </span>
                            </p>
                            <p class="s_radio2">
                                <el-radio label="1">按监控数据USER_ID屏蔽数据</el-radio>
                            </p>
                        </div>
                        </el-radio-group>
                    </div>
                </div>
                <!-- <div class="checkAll">
                    <el-checkbox @change="checkAll">选择全部</el-checkbox>
                </div> -->
                <div class="btnContainer">
                    <el-button type="primary" :loading="btnloading" @click="save" class="test">保存</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            loading: false,
            checked: false,
            activeNames: ['1'],
            //存在本地的每页条数
            threadNum: parseInt(localStorage.getItem('pagesize')),
            arrList: [],
            btnloading: false,
            roleId:"",
            roleName:"",
            parents:[],
            searchKey:"",
            choose_val:"-1",
            filterTypes: [{
                label:"用户帐号",
                value: 0
            },{
                label:"所属组织",
                value: 1
            }],
            checkall: false,
            disable1: false,
            disable2: false,
            disable3: false
        }
    },
    computed: mapState({
        msg: state => state.role.msg,
        roleList: state => state.role.roleList,
        powerList(state) {
            let arr = [];
            state.role.powerList.map((item) => {
                item.filterType = item.filterType.toString();
                item.disable = false;
                if(item.childs !== null) {
                    item.childs.map((item2) => {
                        item2.cheAll = false;
                        item2.disable = false;
                        if(item2.childs !== null) {
                            item2.childs.map((item3) => {
                                item3.disable = false;
                            })
                        }
                    })
                }
                arr.push(item);
            })
            return arr;
        }
        // powerList(state) {
        //     let arr = [];
        //     var self = this;
        //     state.role.powerList.map((item) => {
        //         item.filterType = item.filterType.toString();
        //         if(item.childs !== null) {
        //             let arr2 = item.childs;
        //             item.childs = [];
        //             let map = {}, dest = [];
        //             for(let i = 0; i < arr2.length; i++) {
        //                 let ai = arr2[i];
        //                 if(!map[ai.typeId]) {
        //                     item.childs.push({
        //                         typeId: ai.typeId,
        //                         typeName: ai.typeName,
        //                         cheAll: false,
        //                         data: [ai]
        //                     });
        //                     map[ai.typeId] = ai;
        //                 }else{
        //                     for(let j = 0; j < item.childs.length; j++) {
        //                         let dj = item.childs[j];
        //                         if(dj.typeId == ai.typeId) {
        //                             dj.data.push(ai);
        //                             break;
        //                         }
        //                     }
        //                 }
        //             }
        //         }
        //         arr.push(item)
        //     })
        //     return arr;
        // }
    }),
    watch:{
        // powerList(){
        //     if(this.powerList){
        //         var self = this;
        //         this.powerList.map((item)=>{
        //             self.changeCheck(item.chooseFlag,item)
        //             if(!item.chooseFlag && item.childs){
        //                 item.childs.map((child)=>{
        //                     if(item.dataCheck){
        //                         return;
        //                     }
        //                     self.changeDash(child.chooseFlag,item);
        //                 })
        //             }
        //         })
                
        //     }
        // }
    },
    methods: {
        checkAll(item,item2,event) {
            item2.childs.map((item) => {
                item.chooseFlag = event;
            })
            if(event == true) {
                item.disable = true;
                item.chooseFlag = false;
                item2.disable = true;
                item2.chooseFlag = false
            }else{
                item.disable = false;
                item2.disable = false;
            }
        },
        change1(item,event) {
            if(event == true) {
                if(item.childs) {
                    item.childs.map((item2) => {
                        item2.disable = true;
                        item2.chooseFlag = false;
                        if(item2.childs) {
                            item2.childs.map((item3) => {
                                item3.disable = true;
                                item3.chooseFlag = false;
                            })
                        }
                    })
                }
            }else{
                if(item.childs) {
                    item.childs.map((item2) => {
                        item2.disable = false;
                        if(item2.childs) {
                            item2.childs.map((item3) => {
                                item3.disable = false;
                            })
                        }
                    })
                }
            }
        },
        change2(item,item2,event) {
            if(event == true) {
                item.disable = true;
                item.chooseFlag = false;
                if(item2.childs) {
                    item2.childs.map((item3) => {
                        item3.disable = true;
                        item3.chooseFlag = false;
                    })
                }
            }else{
                item.disable = false;
                if(item2.childs) {
                    item2.childs.map((item3) => {
                        item3.disable = false
                    })
                }
            }
        },
        change3(item,item2,event) {
            if(event == true) {
                item.disable = true;
                item2.disable = true;
                item.chooseFlag = false;
                item2.chooseFlag = false;
            }else{
                item.disable = false;
                item2.disable = false;
            }
        },
        changeCheck(event,item) {
            item.chooseFlag = event;
            if(event == true) {
                item.dashCheck = true;
                if(item.childs){
                    item.childs.map((item) => {
                        item.chooseFlag = false;
                    })
                }
            }else{
                item.dashCheck = false;
            }
        },
        changeDash(event,item) {
            if(event == true) {
                item.dataCheck = true;
                //this.$set(item, 'chooseFlag', false);
            }else{
                this.$set(item, 'chooseFlag', false);
                item.dataCheck = false;
            }
        },
        //获取权限列表
        getPowerlist(roleId) {
            this.$store.state.role.powerList = [];
            this.loading = true
            this.$store.dispatch('getPowerList',{
                sessionId: localStorage.getItem('sessionId'),
                roleId: roleId
            }).then(() => {
                this.loading = false;
                if(this.msg !== '成功') {
                    this.$message(this.msg);
                }
            })
        },
        //保存列表
        save() {
            this.btnloading = true;
            let flag = true;
            this.powerList.map((item) => {
                delete item.disable
                if(item.childs !== null) {
                    item.childs.map((item2) => {
                        delete item2.cheAll
                        delete item2.disable
                        if(item2.childs !== null) {
                            item2.childs.map((item3) => {
                                delete item3.disable
                            })
                        }
                    })
                }
                if(item.filterType == "2") {
                    if(item.filterAccountFieldName == null && item.filterAccountFieldType == null) {
                        flag = false;
                        this.$message('请选择相应的监控类型和监控字段');
                    }else{
                        flag = true;
                    }
                }
            });
            if(flag) {
                this.savePowerList(this.powerList);
            }
        },
        savePowerList(arr) {
            this.$store.dispatch('savePowerList',{
                configs: arr,
                roleId: this.$route.params.roleId,
                sessionId: localStorage.getItem('sessionId')
            }).then(() => {
                if(this.msg == '保存成功') {
                    this.btnloading = false;
                    this.$message(this.msg);
                    this.$router.push({ path:'/ruleset' });
                }else{
                    this.btnloading = false;
                    this.$message(this.msg);
                }
            })
        },
        changeRadio(event, item) {
            console.log(event,item);
        }
    },
    mounted() {
        if(this.$route.params.roleId) {
            this.getPowerlist(this.$route.params.roleId);
            this.roleName = this.$route.params.roleName;
        }else{
            this.$message('请选择角色');
            this.$router.push({ path:'/ruleset' });
        }
    }
}
</script>
<style scoped>
.search_block >>> .el-collapse-item__header{
    padding: 0 15px;
    border: 1px solid #ebeef5;
    border-top: none;
    background-color:#eee;
}
.search_block >>> .el-collapse-item__content{
    border: 1px solid #ebeef5;
    border-bottom: none;
    border-top: none;
    padding-top: 20px;
    padding-bottom: 20px;
}
.list_title{
    font-size: 13px;
    margin-top: 10px;
}
.tb{
    font-size: 14px;
}
.tb_title{
    height: 40px;
    line-height: 40px;
    background-color: #f8f8f8;
    margin-top: 18px;
    border: 1px solid #ddd;
    padding-left: 10px;
}
.tb_ul{
    border: 1px solid #ddd;
    border-top: none;
    display: flex;
}
.tb_ul_l{
    float:left;
    width: 40px;
}
.tb_ul_r{
    float: left;
    flex-grow:20;
    width: 90%;
}
.tb_ul ul{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.tb_ul ul li{
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    border-left: 1px solid #ddd; 
    border-bottom: 1px solid #ddd;
    flex-grow: 1;
    width: 23.8%;
}
.tb_ul ul li:last-child{
    border-right: 1px solid #ddd; 
}
.checkAll{
    height: 40px;
    line-height: 40px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    margin-top: -2px;
    text-align: center;
    font-size: 14px;
}
.btnContainer{
    margin: 24px auto 0 auto;
    display: block;
    width: 60px;
}
.shield{
    height: 96px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-top: none;
}
.s_title{
    line-height: 96px;
    text-align: center;
    font-size: 12px;
    margin-left: 20px;
}
.s_radio{
    margin: 19px 40px 0 30px;
}
.s_radio2{
    margin: 12px 40px 0 30px;
}
.s_input{
    display: inline-block;
    width: 210px;
    margin-left: 10px
}
.span_title{
    float: left;
    display: inline-block; 
    width: 130px; 
    height: 40px;
    overflow:hidden
}
.typeName{
    height: 40px;
    line-height: 40px;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #eeecec;
}
.tn{
    float: left;
    margin-left: 10px;
}
.tn span:last-child{
    margin-left: 26px;
}
.cheAll{
    margin-right: 20px;
    float: right;
}
</style>


